<header class="uc_head">
    <h3>百度地图</h3>
</header>
<center>
    <div id="box" style="padding:40px 30px">
        地址：<input type="text" name="address" id="address">
        <button id="search">搜索</button><button id="shows">展示地图</button>
        <div id="map" style="width:800px;height:500px"></div>
    </div>
</center>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KDjHQYgPuL1ppkGwiUjQOzrIuF9ZQ6rC"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
    $("#search").click(function(){
        var address = $("#address").val();
        // alert(address);
        $.ajax({
            url:"{url:/ucenter/map}",
            data:{address:address},
            type:"post",
            datatype:"json",
            success:function(res){
                var res = JSON.parse(res);
                var lng = res.lng;
                var lat = res.lat;
                // 百度地图API功能
                var map = new BMap.Map("map");
                map.centerAndZoom(new BMap.Point(lng,lat), 15);
                var local = new BMap.LocalSearch(map, {
                    renderOptions:{map: map}
                });
                // local.search(address);
                map.enableScrollWheelZoom(true);
            }
        })
    })
    $("#shows").click(function(){
        var address = $("#address").val();
        // alert(address);
        $.ajax({
            url:"{url:/ucenter/map}",
            data:{address:address},
            type:"post",
            datatype:"json",
            success:function(res){
                var res = JSON.parse(res);
                var lng = res.lng;
                var lat = res.lat;
                var panorama = new BMap.Panorama('map'); //默认为显示导航控件
                panorama.setPosition(new BMap.Point(lng, lat));

                document.getElementById("hideNavigationControl").onclick = function(){
                    panorama.setOptions({
                        navigationControl: false //隐藏导航控件
                    });
                };
                document.getElementById("showNavigationControl").onclick = function(){
                    panorama.setOptions({
                        navigationControl: true //显示导航控件
                    });
                };
                local.search(address);
                map.enableScrollWheelZoom(true);
            }
        });
    });
</script>
